<template>
    <el-dialog :visible.sync="dialogVisible" width="1000px" top="8vh" :close-on-click-modal="false">
        <div slot="title">
            <div class="flex-bc mr20 top-title">
                <div class="left">密码重置</div>
                <div class="right pr20">
                    <span class="el-icon-full-screen cursor" @click="fullscreen=!fullscreen"></span>
                </div>
            </div>
        </div>
        <div class="wrap">
            <el-form label-width="80px" :model="info" ref="input-form" :rules="rules">
                <el-form-item label="用户名" >
                    <el-input v-model="username" readonly/>
                </el-form-item>
                <el-form-item label="密码" prop="password1">
                    <el-input v-model="info.password1" placeholder="请输入密码" type="password"/>
                </el-form-item>
                <el-form-item label="确认密码" prop="password2">
                    <el-input v-model="info.password2" placeholder="请再次输入密码" type="password"/>
                </el-form-item>
            </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="save()" type="primary">保 存</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import {mapState} from 'vuex'
    import {putPassword} from "~/admin/api/user"
    export default {
        computed: mapState({
            user: state => state.user.user
        }),
        data() {
            var validatePass1 = (rule, value, callback) => {
                var pwdRegex = new RegExp('(?=.*\\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&*()]).{8,15}')
                if (!pwdRegex.test(value)) {
                    callback(new Error('密码长度必须不少于8位,不大于15位，并且必须同时包含数字、字母、特殊字符（特殊字符包括（英文字符）：!@#$%^&*()）'))
                }else {
                    callback()
                }
            }
            var validatePass2 = (rule, value, callback) => {
                if (this.info.password1 !== '') {
                    if (value !== this.info.password1) {
                        callback(new Error('两次输入密码不一致!'))
                    } else {
                        callback()
                    }
                } else {
                    callback()
                }
            }
            return {
                dialogVisible: false,
                fullscreen: false,
                info: {
                    password1:'',
                    password2:'',
                },
                rules: {
                    password1: [
                        {required: false,min: 8, max:15, validator: validatePass1, trigger: 'change'}
                    ],
                    password2: [{required: false, validator: validatePass2, trigger: 'change'}]
                },
                username:'',
            }
        },

        methods: {

            show(data) {
                this.dialogVisible = true
                this.username = data.username
                this.userId = data.userId
            },

            save() {
                this.$refs['input-form'].validate(valid => {
                    if (valid) {
                        let param = {
                            userId:this.userId,
                            newpassword1:this.info.password1,
                            username:this.username
                        }
                        putPassword(param).then(resp=>{
                            if(resp.status === 200){
                                this.$message.success('修改成功');
                                this.dialogVisible = false
                            }
                        })

                    }
                })
            },
        }
    }
</script>
<style scoped lang="scss">
    

    .execution {
        max-height: 70vh;
        overflow-y: auto;
    }

    .top-title {

        .left {
            font-size: 18px;
        }

        .right {
            padding-top: 4px;
            padding-right: 1px;
        }
    }

    .wrap {
        min-height: 150px;

    }

    @include dl-list(2, 20px)
</style>
